<template>
	<view class="list-item-wrapper">
		<view
			class="list-item-inner-wrapper"
			id="listItem"
		>
			<view
				class="list-item"
				@click="onClick"
			>
				<view
					class="column-item"
					:key="column.key"
					:style="{ width: column.width || '50%' }"
					v-for="column in columns"
				>
					<view
						class="label"
						:style="{ width: labelWidth + 'px' }"
						>{{ column.label }}：</view
					>
					<view :class="['text', getTextColorClass(column)]">{{
						getTextValue(column)
					}}</view>
				</view>
			</view>
			<view class="btn-wrapper">
				<view
					v-for="btn in buttons"
					:key="btn.key"
					class="item-btn"
					:class="btn.color"
					@click="handleClickBtns(btn.key)"
				>
					{{ btn.text }}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		index: { type: Number, default: 0 },
		buttons: {
			type: Array,
			default: () => [],
		},
		itemData: {
			type: Object,
			default: () => {},
		},
		labelWidth: {
			type: Number,
			default: 70,
		},
		columns: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {};
	},
	onPageScroll(e) {
		console.log('onPageScroll', e);
	},
	methods: {
		_getLeft() {
			console.log('_getLeft', this.$refs.listContentItem.scrollLeft);
		},
		onClick() {
			this.$emit('click');
		},
		getOptionItem(column) {
			const { valueMapList, key } = column;
			if (valueMapList) {
				return valueMapList.find((mItem) => mItem.value == this.itemData[key]);
			}
			return null;
		},
		getTextColorClass(column) {
			const oItem = this.getOptionItem(column);
			return oItem ? `${oItem.color}-color` : '';
		},
		getTextValue(column) {
			const { key } = column;
			const oItem = this.getOptionItem(column);
			return oItem ? oItem?.text : this.itemData[key] || '-';
		},
		handleClickBtns(key) {
			this.$emit('clickBtns', key, this.itemData, this.index);
			// eslint-disable-next-line no-undef
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#listItem')
				.boundingClientRect((data) => {
					console.log(data, '123');
				})
				.exec();
			console.log('ref', this.$refs.listContentItem);
		},
	},
};
</script>
<style scoped lang="scss">
.list-item-wrapper {
	overflow-x: auto;
	width: calc(100vw - 20px);
	margin-bottom: 10px;
	.list-item-inner-wrapper {
		display: flex;
		width: max-content;
		.btn-wrapper {
			display: flex;
			height: auto;
		}
		.item-btn {
			display: flex;
			align-items: center;
			padding: 10px 15px;
			color: #ffffff;
			font-weight: bold;
			border-radius: 4px;
			margin-left: 8px;
			&.error {
				background: $uni-color-error;
			}
			&.primary {
				background: $uni-color-primary;
			}
			&.default {
				background: $uni-text-color-disable;
				color: $uni-text-color;
			}
		}
	}
}
.list-item {
	display: flex;
	flex-wrap: wrap;
	background: #ffffff;
	font-size: 14px;
	padding: 10px 10px 0 10px;
	border: 1px solid #a7a7a7;
	border-radius: 4px;
	width: calc(100vw - 20px);
	.column-item {
		display: flex;
		align-items: baseline;
		margin-bottom: 10px;
		.label {
			color: $uni-text-color-grey;
			text-align: right;
		}
		.text {
			color: $uni-text-color;
			flex: 1;
		}
		.success-color {
			color: $uni-color-success;
		}
		.error-color {
			color: $uni-color-error;
		}
		.wraning-color {
			color: $uni-color-warning;
		}
		.primary-color {
			color: $uni-color-primary;
		}
		.gray-color {
			color: $uni-text-color-grey;
		}
	}
}
</style>
